*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* 100%窗口宽高 */
    min-height: 100vh;
    /* 弹性布局 居中演示 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#485563,#29323c);
}
.container{
    width: 800px;
    height: 500px;
    max-width: 100%;
    /* 相对定位 */
    position: relative;
    /* 默认第一张图作为背景 */
    background: url(/images/214/1.jpg) no-repeat;
}
.clip{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    /* 绝对定位 */
    position: absolute;
    /* 过渡动画 */
    transition: 0.3s ease-in-out;
}
.clip-2{
    background-image: url(/images/214/2.jpg);
    /* clip-path可以创建一个只有元素的部分区域可以显示的剪切区域（区域内的部分显示，区域外的隐藏） */
    /* polygon可以指定剪切区域为任意多边形 */
    clip-path: polygon(43% 0,100% 0,38% 100%,13% 100%);
}
.clip-3{
    background-image: url(/images/214/3.jpg);
    clip-path: polygon(100% 0,100% 0,100% 100%,38% 100%);
}
/* 鼠标悬停 */
.container:hover .clip{
    clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
}
.container .clip:hover{
    clip-path: polygon(0 0,100% 0,100% 100%,0% 100%);
}